<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圈圈百分比</title>
    <style>
        /* div {
            width: 150px;
            height: 150px;
        } */
    </style>
</head>
<body>
    <!-- 这个盒子用来定位的 -->
    <div >
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" class="" viewBox="">
            <!-- 圆形元素 -->
            <circle cx="90" cy="90" r="80" stroke="black" stroke-width="10" fill="none" />
            <!-- stroke-dasharray表示圈圈所占的百分比显示 -->
            <path rate="${deal.attrs.rate}"  stroke-width="10" fill="none" stroke="green" x="90" y="10" r="80" d="M 90,10 A 80,80,0,1,1,12,71" stroke-linecap="round" />
            <!-- <circle cx="90" cy="90" r="80" stroke="red" stroke-width="15" fill="none" stroke-dasharray="30,100" /> -->
            <!-- g盒子用来放文字 -->
            <g><text x="80" y="90">70%</text></g>
        </svg>
    </div>
</body>
</html>